<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2024-12-03 12:06:24
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-03-11 11:20:45
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\centerViews\login\Loginindex.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="loginBox">
    <div class="left">
      <img class="LeftImgtitle" src="../../assets/images/loginLeftTitle.png" />
    </div>
    <div class="right">
      <div class="rightcenter flex flex-col justify-center">
        <div class="title1">
          欢迎登录
        </div>
        <div class="title1">
          武钢云谷·好生活服务中心
        </div>
        <el-form ref="loginFormRef" :model="loginForm" label-width="65px" class="forms" @keyup.enter="login">
          <el-form-item label="账号">
            <el-input v-model.trim="loginForm.loginName" maxlength="20" placeholder="请输入账号">
            </el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model.trim="loginForm.password" maxlength="20" show-password placeholder="请输入密码"
              type="password">
            </el-input>
          </el-form-item>
          <el-form-item label="验证码" class="verificationCode">
            <el-input v-model.trim="loginForm.captchaCode" maxlength="20" placeholder="请输入验证码" type="text">
            </el-input>
            <span class="borderRight"></span>
            <img :src="Baseurl" alt="">
            <span @click="GetBaseImg">看不清换一个</span>
          </el-form-item>
          <div>
            <Pbeckbox :checked="checked" @eckboxclick="checkedEmit"></Pbeckbox>
          </div>
        </el-form>
        <pb-button @click="login"
          :disabled="!(loginForm.loginName && loginForm.password && loginForm.captchaCode)">登录</pb-button>
      </div>
      <Poppassword :isVisible="isVisible" @pushHome="pushHome">
      </Poppassword>
      <div class="footertext">{{ versionText }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Poppassword from './components/updatapassword.vue'
import { createMessage } from "@/Public-UIlibrary/pb-message/method";
import Pbeckbox from './components/pbeckbox.vue'
import {
  useRouter,
  LocationQueryValue,
  LocationQuery,
  useRoute,
} from "vue-router";
import { FirstPasswordApi, GetVersionApi } from '@/api/Newuser'
import { initMenu } from "@/permission";
import { useUserStore } from "@/store/modules/user";
import { usePermissionStoreHook } from "@/store/modules/permission";

import { Md5 } from 'ts-md5';

import { GetBase64Api } from "@/api/Newuser"
const isVisible = ref(false)
const userStore = useUserStore();
const permissionStore = usePermissionStoreHook();
const router = useRouter();
const route = useRoute();
const Logintoken = ref('')
const Baseurl = ref('')
const versionText = ref('')
// 用户信息表单
const loginForm = ref({
  loginName: "",
  password: "",
  captchaCode: "",
  captchaId: ""
});
const checked = ref(false)
// const loginForm = ref<LoginData>(formOrigin());
const loginFormRef = ref(null);
const pushHome = (Newpassword: string) => {
  isVisible.value = false
  console.log(Newpassword, '222')
  FirstPasswordApi({ newPassword: Md5.hashStr(Newpassword) }, {
    'x-token': Logintoken.value
  }).then(res => {
    userStore.setToken(Logintoken.value);
    Gopathroute()
  })
}
const checkedEmit = (Bol: boolean) => {
  checked.value = Bol
}
const Gopathroute = async () => {
  if (checked.value) {
    localStorage.setItem('LoginForms', JSON.stringify({ loginName: loginForm.value.loginName, password: loginForm.value.password, Loginchecked: true }))
  } else {
    localStorage.removeItem('LoginForms')
  }
  const rolesList: any = await userStore.getUserInfo();
  if (rolesList.shouldResetPassword == 1) {
    userStore.pinia_token = ''
    isVisible.value = true
    return
  }
  createMessage({ message: '登录成功，正在跳转，请稍后...', type: 'success', duration: 2500 })
  const accessRoutes = await permissionStore.generateRoutes(rolesList);
  accessRoutes.forEach((route) => {
    // router.addRoute(route);
  });
  const { path, queryParams } = parseRedirect();
  console.log(path, queryParams)
  router.push({ path: path, query: queryParams });
  initMenu(true)
}
// 登录并存入token 请求用户信息
const login = () => {
  if (loginForm.value.loginName && loginForm.value.password && loginForm.value.captchaCode) {
    const parmas = {
      loginName: loginForm.value.loginName,
      password: Md5.hashStr(loginForm.value.password),
      captchaCode: loginForm.value.captchaCode,
      captchaId: loginForm.value.captchaId
    }
    userStore.login(parmas).then(async (res: any) => {
      // console.log(res, '222')
      // return
      Logintoken.value = res
      Gopathroute()
    }).catch(err => {
      // console.log(err)
      GetBaseImg()
      // ElMessage.error(err.msg)
    })
  }
};
function parseRedirect(): {
  path: string;
  queryParams: any;
} {
  const query: LocationQuery = route.query;
  const redirect = (query.redirect as string) ?? "/";

  const url = new URL(redirect, window.location.origin);
  const path = url.pathname;
  const queryParams: any = {};

  url.searchParams.forEach((value, key) => {
    queryParams[key] = value;
  });

  return { path, queryParams };
}

const GetBaseImg = () => {
  GetBase64Api({
    "codeType": "math"
  }).then(res => {
    console.log(res, 'res')
    Baseurl.value = 'data:image/png;base64,' + res.data.captchaBase64
    loginForm.value.captchaId = res.data.captchaId
  })
}
onMounted(() => {
  if (localStorage.getItem('LoginForms')) {
    let { loginName, password, Loginchecked } = JSON.parse(localStorage.getItem('LoginForms') as any)
    // console.log('111', loginName, password, checked)
    loginForm.value.loginName = loginName;
    loginForm.value.password = password;
    checked.value = Loginchecked
  }
  GetBaseImg()
  GetVersionApi({}).then(res => {
    versionText.value = res.data.versionNo
  })
})
</script>

<style lang="css">
.loginBox {
  .el-form-item__label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .el-input__inner {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.45);
    font-style: normal;
    text-transform: none;
  }

  /* .el-checkbox__inner{
    width: 20px;
    height: 20px;
  } */
}
</style>
<style lang="scss" scoped>
::v-deep .el-input__wrapper {
  box-shadow: none;
}

.el-form-item--default {
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);

  .el-form-item__label {
    color: red;
    font-size: 30px;
  }

  // margin: 0;
}

.el-form-item--default:nth-child(3) {
  border-bottom: none;
}

.verificationCode {
  .el-input {
    width: 140px;
  }

  .borderRight {
    width: 1px;
    height: 16px;
    background: rgba(0, 0, 0, 0.1);
    margin-right: 16px;
  }

  span {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    line-height: 18px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    cursor: pointer;
  }
}

::v-deep .el-form-item__label {
  justify-content: flex-start;
}

.loginBox {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  font-family: PingFang SC;

  .left {
    height: 100%;
    background: url('../../assets/images/loginCanteen.png') no-repeat;
    background-size: 1180px 887px;
    background-position: 0px 97px;
    background-color: rgba(201, 224, 255, 1);
    position: relative;
    flex: 1;

    .LeftImgtitle {
      position: absolute;
      width: 214.5px;
      height: 48px;
      left: 48px;
      top: 48px;
    }
  }

  .right {
    width: 38.4375%;
    height: 100%;
    position: relative;
    padding-left: 140px;
    padding-top: 289px;

    .rightcenter {
      width: 480px;

      .title1 {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 40px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 60px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .el-form {
        margin: 48px 0;
      }

      .pb-button-primary {
        margin: 0;
      }
    }
  }

  .referral {
    text-wrap: nowrap;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.78em;
    text-align: left;
    color: #ffffff;
    margin: 40px 0;
  }

  .footertext {
    position: absolute;
    width: 480px;
    bottom: 40px;
    margin: auto;
    font-family: PingFang SC, PingFang SC;
    font-weight: 300;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    line-height: 22px;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
}

.infoBox {
  color: #ffffff;
  position: absolute;
  bottom: 10px;
  font-size: 14px;
  z-index: 999;
}

.version {
  font-size: 14px;
}
</style>